<template>
	<view class="ba-container">
		<view>
				<template v-for="item in familyData ">
				<navigator :url="`/familymembers/pages/familymemberdetails/familymemberdetails?_id=${item.otherId._id}`">
					<view class="fimaly-item">
						<image :src="item.otherId.avatar" class="item-avatar"></image>
						<view>
							<view style="display: flex;">
								<view class="">{{item.otherId.name}}</view>
								<view class="fimaly-relation">{{ item.relationship }}</view>
								<view class="is-default" v-if="item.isDefault">默认成员</view>
							</view>
							<view class="item-info">年龄</view>
							<view class="item-info">签约团队:</view>
						</view>
					</view>
				</navigator>		
			</template>
			<template>
				<view class="">
					<navigator url="/familymembers/pages/addfamilymbers/addfamilymbers">
						<view style="">
							<button style="background-color: rgba(41, 132, 248, 1);
							border: none;width: 670rpx;height: 88rpx; color: #ffffff;margin-top: 20rpx;">+新增家庭成员</button>
						</view>
					</navigator>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getRelationApi
	} from '../../../api/familymembers';


	const familyData = ref({});


	onMounted(() => {
		getRelation();
	})

	function getRelation() {
		getRelationApi({
			ownId: '686f8c4f44c7c46f75e72a54'
		}).then(res => {
			if (res.code == 200) {
				familyData.value = res.data;
			}
		})
	}
</script>

<style scoped lang="scss">
	.ba-container {
		min-height: 100vh;
		background-color: aliceblue;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 40rpx 0;
	}

	.fimaly-item {
		width: 600rpx;
		height: 228rpx;
		background-color: #ffffff;
		box-shadow: 0px 0px 15px rgba(41, 132, 248, 0.0980392156862745);
		border-radius: 12px;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
	}

	.item-avatar {
		width: 160rpx;
		height: 162rpx;
		background-color: #ffffff;
		border-radius: 22px;
		margin-right: 30rpx;
	}

	.fimaly-relation {
		background-color: rgba(40, 208, 148, 0.2);
		border: none;
		border-radius: 8px;
		font-size: 12px;
		color: #28D094;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		margin: 0 20rpx;
		padding: 2rpx 10rpx;
	}

	.is-default {

		height: 48rpx;
		font-size: 12px;
		color: #FA746B;
		background-color: rgba(250, 116, 107, 0.2);
		border: none;
		border-radius: 8px;
		text-align: center;
		line-height: 48rpx;
		padding: 2rpx 10rpx;
	}

	.item-info {
		font-size: 12px;
		line-height: 27px;
		color: #999999;
	}
</style>